<template>
  <menus-button
    ico="word"
    :text="t('export.word.text')"
    huge
    @menu-click="saveWordFile"
  />
</template>

<script setup lang="ts">
import { saveAs } from 'file-saver'

// @ts-ignore - 通过自动导入配置全局可用
const container = inject('container')
// @ts-ignore - 通过自动导入配置全局可用
const editor = inject('editor')
// @ts-ignore - 通过自动导入配置全局可用
const options = inject('options')

const saveWordFile = async () => {
  if (!editor.value) {
    return
  }

  // @ts-ignore - 通过自动导入配置全局可用
  const message = useMessage('loading', {
    attach: container,
    // @ts-ignore - 通过自动导入配置全局可用
    content: t('export.word.loading'),
  })

  try {
    // 获取编辑器HTML内容
    const htmlContent = editor.value.getHTML()

    // 创建完整的HTML文档，包含Word兼容的样式
    const fullHtmlContent = `
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml"
      xmlns:o="urn:schemas-microsoft-com:office:office"
      xmlns:w="urn:schemas-microsoft-com:office:word"
      xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
      xmlns="http://www.w3.org/TR/REC-html40">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="ProgId" content="Word.Document">
  <meta name="Generator" content="Umo Editor">
  <meta name="Originator" content="Umo Editor">
  <!--[if gte mso 9]><xml>
  <w:WordDocument>
    <w:View>Print</w:View>
    <w:Zoom>90</w:Zoom>
    <w:DoNotPromptForConvert/>
    <w:DoNotShowRevisions/>
    <w:DoNotPrintInsideLoop/>
    <w:DoNotShowComments/>
    <w:DoNotShowInsertionsAndDeletions/>
    <w:DoNotShowPropertyChanges/>
  </w:WordDocument>
  </xml><![endif]-->
  <style>
    /* Word兼容样式 */
    @page {
      margin: 2.54cm;
      mso-page-orientation: portrait;
    }
    body {
      font-family: 'Times New Roman', serif;
      font-size: 12pt;
      line-height: 1.5;
      margin: 0;
      padding: 0;
      color: #000;
      background: #fff;
    }
    p {
      margin: 0 0 10pt 0;
      text-align: justify;
    }
    h1, h2, h3, h4, h5, h6 {
      font-weight: bold;
      margin: 10pt 0;
    }
    h1 { font-size: 18pt; }
    h2 { font-size: 16pt; }
    h3 { font-size: 14pt; }
    h4, h5, h6 { font-size: 12pt; }
    ul, ol {
      margin: 0 0 10pt 40pt;
      padding: 0;
    }
    li {
      margin-bottom: 5pt;
    }
    table {
      border-collapse: collapse;
      width: 100%;
      margin: 10pt 0;
    }
    th, td {
      border: 1pt solid #000;
      padding: 4pt 8pt;
      text-align: left;
      vertical-align: top;
    }
    th {
      background-color: #f0f0f0;
      font-weight: bold;
    }
    img {
      max-width: 100%;
      height: auto;
    }
    blockquote {
      margin: 10pt 20pt;
      padding: 5pt 10pt;
      border-left: 3pt solid #ccc;
      font-style: italic;
    }
    code {
      font-family: 'Courier New', monospace;
      background-color: #f5f5f5;
      padding: 2pt 4pt;
      border: 1pt solid #ddd;
    }
    pre {
      font-family: 'Courier New', monospace;
      background-color: #f5f5f5;
      padding: 10pt;
      border: 1pt solid #ddd;
      overflow-x: auto;
    }
    a {
      color: #0066cc;
      text-decoration: underline;
    }
    strong, b {
      font-weight: bold;
    }
    em, i {
      font-style: italic;
    }
    u {
      text-decoration: underline;
    }
    s, strike {
      text-decoration: line-through;
    }
    mark {
      background-color: #ffff00;
    }
  </style>
</head>
<body>
${htmlContent}
</body>
</html>`

    // 创建Blob并保存为.doc格式（Word兼容的HTML）
    const blob = new Blob([fullHtmlContent], {
      type: 'application/msword;charset=utf-8',
    })

    const { title } = options.value.document ?? {}
    // @ts-ignore - 通过自动导入配置全局可用
    const filename = title !== '' ? title : t('document.untitled')
    saveAs(blob, `${filename}.doc`)

    // @ts-ignore - 通过自动导入配置全局可用
    useMessage('success', {
      attach: container,
      // @ts-ignore - 通过自动导入配置全局可用
      content: t('export.word.success'),
    })
  } catch (error) {
    console.error('Word导出失败:', error)
    // @ts-ignore - 通过自动导入配置全局可用
    useMessage('error', {
      attach: container,
      // @ts-ignore - 通过自动导入配置全局可用
      content: t('export.word.error'),
    })
  }
}
</script>

<style lang="less" scoped></style>
